<template>
  <viDialog
    :deptShow="true"
    :yearShow="true"
    :visibility.sync="visibility"
    :deptList="deptList"
    title="开票与收款"
    unit="万元"
    :projectShow="true"
    @changeYear="changeYear"
    @changeDept="changeDept"
    @changeProject="changeProject"
  >
    <div class="content-dialog-body">
      <div class="left banner">
        <div class="header">
          <label>累计</label>
          <span>单位：万元</span>
        </div>
        <viLine ref="reference2" :configurationInformation="infos2" />
      </div>
      <div class="right banner">
        <div class="header">
          <label>年度</label>
          <span>单位：万元</span>
        </div>
        <viLine ref="reference1" :configurationInformation="infos1" />
      </div>
      <div class="left banner">
        <div class="header">
          <label>开票-地区</label>
          <span>单位：万元</span>
        </div>
        <viBar
          ref="reference3"
          :configurationInformation="configurationInformation"
          :xShow="false"
        />
      </div>
      <div class="right banner">
        <div class="header">
          <label>收款-地区</label>
          <span>单位：万元</span>
        </div>
        <viBar
          ref="reference4"
          :configurationInformation="configurationInformation"
          :xShow="false"
        />
      </div>
    </div>
  </viDialog>
</template>

<script>
import { viDialog, viLine, viBar } from "@/components/visualization/index";
import request from "@/utils/request";
import Qs from "qs";

export default {
  name: "vi-invoice-collection",
  components: {
    viDialog,
    viLine,
    viBar
  },
  props: {
    deptList: {
      default: () => []
    }
  },
  data() {
    return {
      visibility: false,
      deptId: -1,
      infos1: {
        showHeader: true
      },
      infos2: {
        showHeader: true
      },
      configurationInformation: {
        colors: {
          default: "#F3684B",
          active: "#1890FF"
        },
        barwidth: "24",
        title: {
          name: "",
          unit: ""
        },
        radioList: {
          radio: "",
          list: []
        },
        showHeader: true
      },
      year: "",
      projectId: null,
    };
  },
  created() {
    this.gettimes()
  },
  methods: {
    changeProject(val) {
      this.projectId = val;
      this.screenInvoiceAndCollectionMonth();
      this.screenInvoiceAndCollectionPlace();
    },
    gettimes() {
      const time = new Date();
      const year = time.getFullYear();
      const month = time.getMonth() + 1;
      const day = time.getDate();
      this.year=`${year}`
    },
    changeYear(val) {
      this.year = val;
      this.screenInvoiceAndCollectionMonth();
      this.screenInvoiceAndCollectionPlace();
    },
    changeDept(val) {
      this.deptId = val;
      this.draw();
    },
    screenInvoiceAndCollectionMonth(deptId = this.deptId) {
      request({
        url: "/system/screen/invoiceAndCollectionMonth",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          projectId: this.projectId,
        })
      }).then(res => {
        let x = [];
        let y1 = [];
        let y2 = [];
        for (let i = 0; i < 12; i++) {
          x.push(`${i + 1}月`);
        }
        for (const i in res.data) {
          const data=res.data[i].split('|')
          y1.push(((Number(data[0])/10000)).toFixed(4)||0)
          y2.push(((Number(data[1])/10000)).toFixed(4)||0)
        }
        // this.drawInvoiceCollection("1", y1, y2, x);
        this.$refs.reference1.draw({
          ...this.infos1,
          xData: x,
          yData1: y1,
          yData2: y2
        });
      });
    },
    screenInvoiceAndCollectionYear(deptId = this.deptId) {
      request({
        url: "/system/screen/invoiceAndCollectionYear",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          projectId: this.projectId,
        })
      }).then(res => {
        let x = [];
        let y1 = [];
        let y2 = [];
        for (const i in res.data) {
          x.push(i);
          const data=res.data[i].split('|')
          y1.push(((Number(data[0])/10000)).toFixed(4)||0)
          y2.push(((Number(data[1])/10000)).toFixed(4)||0)
        }
        this.$refs.reference2.draw({
          ...this.infos1,
          xData: x,
          yData1: y1,
          yData2: y2
        });
      });
    },
    screenInvoiceAndCollectionPlace(deptId = this.deptId) {
      // 开票地 speedInput   收款地: collectionList
      request({
        url: "/system/screen/invoiceAndCollectionPlace",
        method: "post",
        headers: { "content-type": "application/x-www-form-urlencoded" },
        data: Qs.stringify({
          deptId,
          year: this.year,
          projectId: this.projectId,
        })
      }).then(res => {
        let x1 = [];
        let x2 = [];
        let y1 = [];
        let y2 = [];
        res.data.speedInputList.forEach(item => {
          x1.push(item.deptName);
          y1.push((item.amount / 10000).toFixed(3) || 0);
        });
        res.data.collectionList.forEach(item => {
          x2.push(item.deptName);
          y2.push((item.amount / 10000).toFixed(3) || 0);
        });
        this.$refs.reference3.draw({
          ...this.configurationInformation,
          barwidth: "16",
          colors: {
            default: "#F3684B",
            active: "#1890FF"
          },
          xData: x1,
          yData: y1
        });
        this.$refs.reference4.draw({
          ...this.configurationInformation,
          barwidth: "16",
          colors: {
            default: "#3EC4D9",
            active: "#1890FF"
          },
          xData: x2,
          yData: y2
        });
      });
    },
    draw() {
      this.screenInvoiceAndCollectionMonth();
      this.screenInvoiceAndCollectionYear();
      this.screenInvoiceAndCollectionPlace();
    },
    open() {
      this.visibility = true;

      this.draw();
    }
  }
};
</script>

<style scoped lang="scss">
@import "../style/popup";
</style>
